<template>
    <div class="app-container">
        <el-card class="box-card">
            
            <div class="checkedBox flex items-center mb-4">
                <span style="text-align: right;">时间：</span>
                <el-date-picker
                    v-model="listQuery.start_time"
                    class="marginRB10"
                    clearable
                    placeholder="开始时间"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
                <el-date-picker
                    v-model="listQuery.end_time"
                    class="mr-4 ml-4"
                    clearable
                    placeholder="结束时间"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
                
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
            </div>
            <el-table
                ref="multipleTable"
                v-loading="loading"
                :data="tableData"
                border
                class="mt-3"
                stripe
                style="width: 100%"
                tooltip-effect="dark"
            >
                <el-table-column label="序号" type="index" :index="indexMethod" prop="user_code" width="100px"></el-table-column>
                <el-table-column label="打工结束时间" prop="task_id"></el-table-column>
                <el-table-column label="用户ID" prop="prize_id"></el-table-column>
                <el-table-column label="用户编号" prop="count"></el-table-column>
                <el-table-column label="用户昵称" prop="title"></el-table-column>
                <el-table-column label="萌宠品质" prop="icon"></el-table-column>
                <el-table-column label="萌宠昵称" prop="icon"></el-table-column>
                <el-table-column label="获得粉钻数量" prop="icon"></el-table-column>
                <el-table-column label="获得碎片数量" prop="icon"></el-table-column>
                <el-table-column label="获得礼物" prop="icon"></el-table-column>
            </el-table>
    
            <!-- 分页 -->
            <cus-pagination
                v-show="total > 0"
                :limit.sync="listQuery.perPage"
                :page.sync="listQuery.page"
                :total="total"
                @pagination="getTableData"
            />
        </el-card>
  
    </div>
</template>
  
<script>
    import { balanceTaskPrizeList, balanceTaskPrizeSave, balanceTaskPrizeDelete, petPrizeList, balanceTaskList } from '@/api/petsManagement'
  	export default {
        name: 'workOutputDetail',
        data() {
            return {
                checked: false,
                dialogTitle: 'add',
                dialogVisible: false,
                info: {},
                loading: false,
                loading2: false,
                tableData: [],
                listQuery: {
                    page: 1,
                    perPage: 10,
                    start_time: undefined,
                    end_time: undefined,
                },
                total: 1,
            }
        },
        created() {
            
            this.getTableData()
        },
        methods: {
            indexMethod(index) {
                return this.total - (this.listQuery.page-1) * this.listQuery.perPage - index
            },
            // 网络请求
            /**
             * getTableData
             * @desc 获取表格数据
             */
            async getTableData() {
                this.loading = true
                for (let key in this.listQuery) {
                    this.listQuery[key] = !this.listQuery[key] ? undefined : this.listQuery[key]
                }
                const {data, code} = await balanceTaskPrizeList(this.listQuery)
                if (code === 200) {
                    this.tableData = data.list
                    this.total = data.meta.total
                }
                this.loading = false
        
            },
            handleSearch() {
                this.listQuery.page = 1
                this.initData()
            },
            handleReset() {
                this.listQuery = {
                    page: 1,
                    perPage: 10,
                    start_time: undefined,
                    end_time: undefined,
                }
                this.initData()
            },
            handleJump(row) {
                this.$router.push({
                    path: 'workOutputDetail',
                    query: {
                        task_id: row.id
                    }
                })
            },
        }
    }
</script>
  
<style lang="scss" scoped>
::v-deep{ 
    .hide_box{
        .el-upload--picture-card {
            display: none;
        }
    }
    .el-upload-list__item {
        margin-right: 1em !important;
    }
}

.image {
    width: 200px;
}
::v-deep {
	.formItemBox{
		.el-form-item {
			width: 50% !important;
		}
	}
    
}

</style>
  